<template>
  <div id="admin">
    <el-container>
      <el-header id="main-header">
        <el-container>
          <el-main id="header-left">
            <el-link type="primary"
                     style="font-size: 18px;color: #FFFFFF;" @click="closeOrOpen()">
              LEO-ADMIN-DEMO<i :class="closeIcon"></i>
            </el-link>
          </el-main>
          <el-main id="header-content">
            <el-menu background-color="#409EFF"
                     text-color="#000"
                     active-text-color="#fff" id="horizontal-menu" mode="horizontal"
                     :default-active="horizDefaultActive" @select="handleSelect">
              <el-menu-item v-for="(item,index) of horizontalMenu" :key="index" :index="index +''">
                <template slot="title" v-if="item.havePermission">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </template>
              </el-menu-item>
            </el-menu>
          </el-main>
          <el-main id="header-right">
            <el-tooltip placement="top" content="主页">
              <el-link icon="el-icon-s-home" style="color: #FFFFFF"></el-link>
            </el-tooltip>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip placement="top" content="个人信息">
              <el-link icon="el-icon-user" style="color: #FFFFFF"></el-link>
            </el-tooltip>
            <el-divider direction="vertical"></el-divider>
            <el-tooltip placement="top" content="退出系统">
              <el-link icon="el-icon-sys-excite" style="color: #FFFFFF" @click="loginOut"></el-link>
            </el-tooltip>
          </el-main>
        </el-container>
      </el-header>
      <el-main id="main-content">
        <el-container>
          <el-aside width="200" id="aside">
            <!--菜单-->
            <el-menu v-if="show" id="menu" @open="openMenu" @close="closeMenu" :default-active="defaultActive"
                     :unique-opened="true" class="el-menu-vertical-demo" :collapse="isCollapse">
              <el-submenu v-for="(item,index) of menuTree" :key="index" :index="index + ''">
                <template slot="title" v-if="item.havePermission">
                  <i :class="item.icon"></i>
                  <span slot="title">{{item.name}}</span>
                </template>
                <el-menu-item-group v-for="(child,i) of item.children" :key="i">
                  <el-menu-item v-if="child.havePermission"  @click="choseMenu(child)" :index="index + '-' + i"><i :class="child.icon"></i>
                    {{child.name}}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
            <el-divider direction="vertical"></el-divider>
          </el-aside>
          <el-main id="content">
            <el-container>
              <el-header id="content-header">
                <div class="tag-group">
                  <el-tag :effect="firstMenu.effect" style="margin-left: 1%" @click="choseMenu(firstMenu)"><i
                    :class="firstMenu.icon"></i>{{firstMenu.name}}
                  </el-tag>
                  <el-tag style="margin-right: 5px" @close="closeTag(item,index)" closable
                          v-for="(item,index) in contentCache" :effect="item.effect" :key="index"
                          @click="choseMenu(item)"><i :class="item.icon"></i>{{item.name}}
                  </el-tag>
                </div>
                <el-divider content-position="left"><i :class="cardIcon"></i> {{carName}}</el-divider>
              </el-header>
              <el-main style="top: 10px; bottom: 100px; position: relative;">
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%">
                  <span>您的密码还是初始密码，为了您的账号安全，请修改密码</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm">确 定</el-button>
                  </span>
                </el-dialog>
                <el-dialog
                  title="提示"
                  :visible.sync="serverError"
                  width="30%"
                  :close-on-click-modal="false"
                  :show-close="false">
                  <span>{{singleLoginMsg}}</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="singleLoginConfirm">确 定</el-button>
                  </span>
                </el-dialog>
                <component v-bind:is="selectMenu">
                </component>
              </el-main>
              <el-footer id="footer" height="auto">
                <el-divider id="foot-divider"></el-divider>
                © leo.com - copyright@2019-2020
              </el-footer>
            </el-container>
          </el-main>
        </el-container>
      </el-main>
    </el-container>

  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import SockJS from 'sockjs-client';
  import Stomp from 'stompjs';
  //系统管理
  import autoGenCode from './sys/auto/auto-gen-code'
  import menuInfo from './sys/menu/menu-info'
  import dicInfo from './dic/dictionary/dic-info'
  import areaInfo from './dic/area/area-info'
  import officeInfo from './sys/office/office-info'
  import userInfo from './sys/user/user-info'
  import roleInfo from './sys/role/role-info'
  import updatePassword from './sys/user/update-password'
  import Vue from 'vue'

  import myInformation from './sys/user/my-information'

  export default {
    components: {
      autoGenCode,
      myInformation,
      menuInfo,
      dicInfo,
      areaInfo,
      officeInfo,
      userInfo,
      roleInfo,
      updatePassword
    },
    computed: {
      ...mapState({
        userInfo: state => state.manager.userInfo,
      }),

    },
    name: "admin",
    data() {
      return {
        singleLoginShow: false,
        serverError:false,
        singleLoginMsg: '',
        dialogVisible: false,
        show: true,
        userContent: [],
        horizDefaultActive: '0',
        defaultActive: '0-0',
        horizontalMenu: [],
        selectMenu: '',
        selectMenuId: '',
        carName: '',
        cardIcon: '',
        isCollapse: false,
        menuTree: [],
        firstMenu: {},
        contentCache: {},
        closeIcon: 'el-icon-s-fold el-icon--right',
        stompClient: '',
        timer: '',
        socket: "",
        isSingleLoginShow: false
      }
    },
    watch: {
      userInfo: {
        handler(val) {
        },
        deep: true
      },
      isCollapse() {
        this.$nextTick(() => {
          if (this.isCollapse) {
            this.closeIcon = 'el-icon-s-unfold el-icon--right'
            setTimeout(() => {
              $("#aside").css('width', '65px')
            }, 350)
          } else {
            $("#aside").css('width', '202px')
            this.closeIcon = 'el-icon-s-fold el-icon--right'
          }
        })
      }
    },
    methods: {
      confirm() {
        this.dialogVisible = false
        let currentMenu = this.menuTree[0].children[1]
        console.log(currentMenu)
        this.$set(currentMenu, 'effect', 'dark')
        this.$set(this.firstMenu, 'effect', 'plain')
        this.cardIcon = currentMenu.icon
        this.selectMenu = currentMenu.pageRefresh
        this.selectMenuId = currentMenu.id
        this.$store.commit('set_buttons', currentMenu)
        console.log('selectMenu', this.selectMenu)
        this.$set(this.contentCache, currentMenu.id, currentMenu)
        this.$nextTick(() => {
          this.defaultActive = '0-1'
        })
      },
      handleSelect(key, keyPath) {
        if (this.horizontalMenu[key].children.length != 0) {
          this.$nextTick(() => {

            this.menuTree = $.extend(true, [], this.horizontalMenu[key].children)

            this.firstMenu = this.menuTree[0].children[0]
            this.carName = this.firstMenu.name
            this.cardIcon = this.firstMenu.icon
            this.selectMenu = this.firstMenu.pageRefresh
            this.selectMenuId = this.firstMenu.id
            this.$set(this.firstMenu, 'effect', 'dark')
            this.$nextTick(() => {
              this.defaultActive = '0-0'
            })
            $("#aside").css('width', '202px')
            this.contentCache = $.extend(true, {}, {})

          })
        } else {

        }
      },
      openMenu(key, keyPath) {
        this.$nextTick(() => {
          $("#aside").css('width', '202px')
        })
      },
      closeMenu(key, keyPath) {
        setTimeout(() => {
          $("#aside").css('width', '130px')
        }, 300)
      },
      closeOrOpen() {
        this.isCollapse = !this.isCollapse
      },
      loginOut() {
        this.common.request({
          url: 'sys/userInfo/loginOut',
          loading: false,
          success: res => {
            if (res.code == 1) {
              vueRouter.replace('/login')
            }
          }
        })
      },
      closeTag(item, index) {
        Vue.delete(this.contentCache, item.id)
        let keys = this.common.getKeys(this.contentCache)
        if (keys.length == 0) {
          this.choseMenu(this.firstMenu)
        } else {
          if (this.selectMenuId == index) {
            this.choseMenu(this.contentCache[keys[keys.length - 1]])
          }
        }
      },
      choseMenu(content) {
        this.$store.commit('set_buttons', content)
        this.carName = content.name
        this.cardIcon = content.icon
        this.selectMenu = content.pageRefresh
        this.selectMenuId = content.id
        for (let id in this.contentCache) {
          this.$set(this.contentCache[id], 'effect', 'plain')
        }
        if (content.id == this.firstMenu.id) {
          this.$set(this.firstMenu, 'effect', 'dark')
        } else {
          this.$set(this.firstMenu, 'effect', 'plain')
          this.$set(this.contentCache, content.id, content)
          this.$set(this.contentCache[content.id], 'effect', 'dark')
        }

      },
      getLoginMenu() {
        this.common.request({
          url: 'sys/menuInfo/getLoginMenu',
          param: {
            isAdmin: this.isAdmin
          },
          loading: false,
          success: res => {
            if (res.code == 1) {
              this.horizontalMenu = $.extend(true, [], res.data.rows)
              this.menuTree = $.extend(true, [], res.data.rows[0].children)
              this.firstMenu = this.menuTree[0].children[0]
              this.carName = this.firstMenu.name
              this.cardIcon = this.firstMenu.icon
              this.selectMenu = this.firstMenu.pageRefresh
              this.$set(this.firstMenu, 'effect', 'dark')
            }
          }
        })
      },
      initWebSocket() {
        let _this = this
        this.common.socketRequest({
          getMessage:res=>{
            if (_this.common.isNotEmpty(res.code)) {
              if(res.code == -2||res.code == -3||res.code == -4){
                _this.common.layMsgAutoClose({msg:res.msg})
                _this.isSingleLoginShow = true
                setTimeout(()=>{
                  vueRouter.replace("/")
                },2000)
              }
            }
          },
          close:()=>{
            if (!_this.isSingleLoginShow) {
              _this.serverError = true
              _this.singleLoginMsg = "服务器错误，请重新登录"
            }
          }
        })
      },
      singleLoginConfirm() {
        this.singleLoginShow == false
        vueRouter.replace('/login')
      }
    },
    mounted() {
      this.getLoginMenu()
      this.initWebSocket()
      if (this.userInfo.isDefaultPass == 1) {
        this.dialogVisible = true
      }
      setTimeout(()=>{
        this.common.sendSocketMessage({msg:"测试"})
      },2000)

    },
    beforeDestroy: function () {
      // 页面离开时断开连接,清除定时器

    }
  }
</script>

<style scoped>
  #admin {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    display: flex;
  }

  .el-row {
    margin-top: 20px;
  }

  .el-col {

  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    min-height: 36px;
  }

  .row-bg {
    background-color: #f9fafc;
  }
</style>
